<template>
  <div class="common-layout">
    <el-container class="home-container">
      <!-- 侧边栏区域 -->
      <el-aside>
        <div class="logo">
          <img src="../assets/image/logo.jpg" alt="" />
          <span>韶关废品智慧回收平台</span>
        </div>
        <!-- 侧边栏菜单区域 -->
        <el-menu
          active-text-color="#409EFF"
          background-color="#545c64"
          text-color="#fff"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
          <!-- 一级菜单 -->
          <el-sub-menu :index="item1.id" v-for="item1 in menulist" :key="item1.id">
            <template #title>
              <el-icon><component :is="item1.icon"></component></el-icon>
              <span>{{ item1.name }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :index="item2.path" v-for="item2 in item1.children" :key="item2.id">
              <template #title>
                <el-icon><Menu /></el-icon>
                <span>{{ item2.name }}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主体内容区域 -->
      <el-container class="home-content">
        <!-- 主体内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 菜单列表
      menulist: [
        {
          id: 1,
          name: '用户管理',
          icon: 'User',
          children: [{ id: 1, name: '用户列表', path: '/user' }]
        },
        {
          id: 2,
          name: '订单管理',
          icon: 'Document',
          children: [
            { id: 1, name: '商品订单', path: '/shoporder' },
            { id: 2, name: '废品订单', path: '/wasteorder' }
          ]
        },
        {
          id: 3,
          name: '公益管理',
          icon: 'SuitcaseLine',
          children: [
            { id: 1, name: '用户公益', path: '/alpublic' },
            { id: 2, name: '公益分类', path: '/publiccate' },
            { id: 3, name: '公益事件', path: '/publicevent' }
          ]
        },
        {
          id: 4,
          name: '积分商城',
          icon: 'Coin',
          children: [{ id: 1, name: '商品列表', path: '/shop' }]
        },
        {
          id: 5,
          name: '废品管理',
          icon: 'Cpu',
          children: [
            { id: 1, name: '废品列表', path: '/waste' },
            { id: 2, name: '废品价格', path: '/wasteprice' }
          ]
        },
        {
          id: 6,
          name: '通知管理',
          icon: 'Setting',
          children: [{ id: 1, name: '通知列表', path: '/notice' }]
        },
        {
          id: 7,
          name: '人脸管理',
          icon: 'View',
          children: [
            { id: 1, name: '人脸列表', path: '/face' },
            { id: 2, name: '人脸日志', path: '/facelog' }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;

  .home-container {
    height: 100%;

    // 侧边栏区域
    .el-aside {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 220px;
      height: 100%;
      background-color: #545c64;

      // logo 区域
      .logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;

        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }

        span {
          margin-top: 20px;
          font-size: 20px;
          font-family: serif;
          color: #fff;
        }
      }
      // 菜单
      .el-menu {
        margin-top: 20px;
        font-size: 16px;
      }
    }

    // 主体内容区域
    .home-content {
      margin-left: 220px;

      .el-main {
        padding: 0;
      }
    }
  }
}
</style>
